﻿<DemoPageSectionComponent Id="Charts-Customization-Series-SeriesPointImage">
    @inject WeatherForecastService ForecastService

    <DxChart Data="@WeatherForecasts"
             CustomizeSeriesPoint="@PreparePointImage"
             Width="100%">
        <DxChartTitle Text="15-Day Weather Forecast" />
        <DxChartLineSeries SummaryMethod="@(i => (int)i.Average())"
                           ValueField="@((WeatherForecast i) => i.TemperatureF)"
                           ArgumentField="@(i => i.Date.Date)"
                           Name="Temperature, °F">
            <DxChartSeriesPoint>
                <DxChartSeriesPointImage Width="50"
                                         Height="50" />
            </DxChartSeriesPoint>
        </DxChartLineSeries>
        <DxChartLegend Visible="false" />
        <DxChartValueAxis>
            <DxChartAxisTitle Text="Temperature, °F" />
        </DxChartValueAxis>
    </DxChart>


    @code {
        IEnumerable<WeatherForecast> WeatherForecasts;

        protected override async Task OnInitializedAsync() {
            WeatherForecasts = await ForecastService.GetForecastAsync();
        }

        protected void PreparePointImage(ChartSeriesPointCustomizationSettings pointSettings) {
            IEnumerable<WeatherForecast> dataItems = pointSettings.Point.DataItems
                .Cast<WeatherForecast>();
            var weatherType = dataItems.GroupBy(x => x.CloudCover)
                .OrderByDescending(x => x.Count())
                .First()
                .Key;
            pointSettings.PointAppearance.Image.Url =
                StaticAssetUtils.GetImagePath($"wheather/{weatherType}.png");
        }
    }
</DemoPageSectionComponent>
